<template>
  <div style="width: 50%;margin: 0 auto">
    <el-form :model="ruleForm" ref="ruleForm" label-width="200px" class="demo-ruleForm">
      <el-form-item label="名称" prop="name">
        <el-select :disabled="disable" v-model="ruleForm.name" placeholder="选择要筛选的依据">
          <el-option
              v-for="value in vaccineList"
              :label="value"
              :value="value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="疫苗编号" prop="msg">
        <el-select :disabled="disable" v-model="ruleForm.msg" placeholder="选择要筛选的依据">
          <el-option
              v-for="value in vaccineNumberList"
              :label="value"
              :value="value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="beforeStep('ruleForm')">上一步</el-button>
        <el-button type="primary" @click="nextStep('ruleForm')">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "VaccineMessage",
  props:['vaccineMsg'],
  data() {
    return {
      flag:'vaccine',
      currentAct:2,
      isSingle:1,
      ruleForm: {
        id:'',
        name: '',
        msg: ''
      },
      vaccineList:null,
      vaccineNumberList:null,
      disable:false
    };
  },
  methods:{
    nextStep(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$bus.$emit("NextStep",this.flag,this.currentAct,this.ruleForm)
        } else {
          return false;
        }
      });
    },
    beforeStep(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$bus.$emit("beforeStep",this.flag,this.currentAct,this.ruleForm)
        } else {
          return false;
        }
      });
    }
  },
  watch:{
    "ruleForm.name"(newValue,oldValue){
      axios({
        url:'http://localhost:88/api/stock/vaccineStock/getNumber',
        method:'get',
        params:{
          newValue:newValue
        }
      }).then(res =>{
        this.vaccineNumberList = res.data.data
      })
    }
  },
  mounted() {
    if (this.vaccineMsg.flag === "byRoute"){
      this.ruleForm.id=this.vaccineMsg.vid
      this.ruleForm.msg=this.vaccineMsg.vmsg
      this.ruleForm.name=this.vaccineMsg.vname
    }else{
      this.disable = true
    }
  }
}
</script>

<style scoped>

</style>
